<script setup lang="ts">
import { onMounted, ref } from "vue";

import { InfoFilled } from "@element-plus/icons-vue";
import { Experiment, getExperiment } from "@/api/LabExperimentApi";
import { useRoute } from "vue-router";

import Line from "./components/Line.vue";

defineOptions({
  name: "HisData"
});

const { query } = useRoute();

// const expInstName = ref(query.name ? query.name : "");
const expInstId = ref(query.id ? query.id : "");

const labExperimentData = ref<Partial<Experiment>>({});
const formattedTime = ref("00 小时 00 分钟 00 秒");

const loading = ref<boolean>(true);
setTimeout(() => {
  loading.value = !loading.value;
}, 800);

const fetchData = async () => {
  if (!expInstId.value) {
    // ElMessage.error("请选择具体实例");
    return;
  }
  const labExpRes = await getExperiment(expInstId.value as string);
  if (labExpRes.data.sensors) {
    labExpRes.data.sensors.forEach(sensor => {
      if (sensor.ext) {
        try {
          sensor.ext = JSON.parse(String(sensor.ext));
        } catch (error) {
          return;
        }
      }
    });
  }
  labExperimentData.value = labExpRes.data;
};

onMounted(async () => {
  await fetchData();
});
</script>
<template>
  {{ labExperimentData }}
  <div style="padding-top: 8px; padding-left: 8px">
    <div class="card-header box-card" style="padding: 8px">
      <span style="margin-left: 20px" class="font-medium">
        {{ labExperimentData.name }}
      </span>
      <el-popover
        placement="right"
        title="实例信息"
        :width="850"
        trigger="hover"
      >
        <!-- <expinfo
          :expData="labExperimentData"
          :configFlag="Boolean(configFlag)"
          :configId="configId"
        /> -->
        <template #reference>
          <el-icon style="margin-left: 2px" color="#B2B2B2" :size="18">
            <InfoFilled />
          </el-icon>
        </template>
      </el-popover>
      <el-tag
        style="margin-left: 20px"
        effect="light"
        size="small"
        :type="
          labExperimentData.state === 20
            ? 'danger'
            : labExperimentData.state === 10
            ? ''
            : labExperimentData.state === 0
            ? 'warning'
            : 'info'
        "
      >
        {{
          labExperimentData.state === 20
            ? "已结束"
            : labExperimentData.state === 10
            ? "正在运行"
            : labExperimentData.state === 0
            ? "未开始"
            : String(labExperimentData.state)
        }}
      </el-tag>
      <el-text
        type="info"
        size="default"
        style="margin-right: auto; margin-left: 20px"
        >{{ formattedTime }}</el-text
      >
    </div>
    <div class="split-pane" style="height: 100px">
      <el-card shadow="never" class="box-card">
        <el-skeleton animated :rows="7" :loading="loading">
          <template #default>
            <Line
              :labExperimentData="labExperimentData"
              :expInstId="String(expInstId)"
            />
          </template>
        </el-skeleton>
      </el-card>
    </div>
  </div>
</template>
<style lang="scss" scoped>
$W: 100%;
$H: calc(100vh - 64px);

:deep(.el-timeline-item) {
  margin: 6px 0 0 6px;
}

.main-content {
  margin: 8px !important;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
}

.split-pane {
  width: $W;
  height: $H;
}

.box-card {
  margin-bottom: 8px;
}

:deep(.el-drawer__header) {
  margin-bottom: 10px !important;
}
</style>
